<template>
  <div style="padding: 10px 0">
    <Timeline mode="alternate">
      <TimelineItem v-for="(item, index) in list" :key="index">
        <div>操作人：{{ item.createBy }}</div>
        <div>操作时间：{{ item.createTime }}</div>
        <div>当前状态：{{ setLabel(item.waterMeterStatus) }}</div>
      </TimelineItem>
    </Timeline>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { Timeline, TimelineItem } from 'ant-design-vue';
  import { getWaterMeterStatus } from '/@/api/jd/water-box';
  import { DICT } from '/@/enums/dict';
  import { getDictTypeListApi } from '/@/api/admin/dict';

  interface Record {
    water_meter_id: string;
    [key: string]: any;
  }

  interface ResultData {
    createBy: string;
    createTime: string;
    waterMeterStatus: string;
    [key: string]: any;
  }
  const props = withDefaults(
    defineProps<{
      record: Record;
      setModalProps: Function;
    }>(),
    {
      record: () => {
        return { water_meter_id: '' };
      },
      setModalProps: () => {},
    },
  );

  const list = ref<ResultData[]>([]);
  let waterStatusArr: any[] = [];
  async function dict() {
    waterStatusArr = await getDictTypeListApi({ type: DICT.WATER_METER_STATUS });
    getTimeLintList();
  }

  const setLabel = (status: string) => {
    let str = '-';
    const obj = waterStatusArr.find((i) => i.value === status);
    if (obj) {
      str = obj.label;
    }
    return str;
  };
  // 获取时间轴列表
  const getTimeLintList = async () => {
    list.value = await getWaterMeterStatus(props.record?.water_meter_id);
  };

  onMounted(() => {
    dict();

    props.setModalProps({
      showOkBtn: false,
      cancelText: '关闭',
    });
  });
</script>

<style lang="less" scoped></style>
